<template>
  <view :class="{'is-animation': isAnimation, 'is-open': isOpen}" class="p-pop-x">
    <view :class="{'is-show': show === 1}" class="layer-1">
      <view class="title">
        <view class="h1">摇一摇，加送升级福利</view>
        <view class="em">万人广场摇摇乐</view>
      </view>
      <view v-if="userList" class="user">
        <view class="x-grid span-5 row">
          <view v-for="(item, index) in userList.slice(0, 10)" :key="index" class="li">
            <view class="avatar">
              <x-image :src="item.avatar" />
            </view>
          </view>
        </view>
        <view class="row flex">
          <view v-for="(item, index) in userList.slice(10)" :key="index" class="li">
            <view class="avatar">
              <x-image :src="item.avatar" />
            </view>
          </view>
        </view>
      </view>
      <view class="hand">
        <view class="left"></view>
        <view class="right"></view>
        <view class="timeout">{{ sum >= 0 ? sum : 0 }}秒后自动领取</view>
      </view>
    </view>

    <view :class="{'is-show': show === 2}" class="layer-2">
      <view class="title">有缘人相助，恭喜摇成功</view>
      <view class="user">
        <view class="li">
          <view class="avatar my">
            <x-image src="/assets/images/avatar-normal.png" />
          </view>
        </view>
        <view class="li">
          <view class="avatar you">
            <view class="avatar">
              <x-image :src="userList[5].avatar" />
            </view>
          </view>
        </view>
      </view>
      <view class="box" @click="handleSubmit">
        <view class="dl">
          <view class="dt">今日最佳</view>
          <view class="amount">
            {{ detail.totalDiscountAmount }}
            <view class="sub">元</view>
          </view>
          <view class="dd">红包金额</view>
        </view>
        <view class="button">开心使用</view>
        <view class="timeout">{{ sum >= 0 ? sum : 0 }}秒后自动领取</view>
      </view>
    </view>

    <view class="_close" @click="handleClose">
      <x-icon name="icon-003" size="50" color="#fff"/>
    </view>
  </view>
</template>

<script>
import XImage from '@/components/x-image';
import XIcon from '@/components/x-icon';

export default {
  name: 'PPop10',
  components: {
    XIcon,
    XImage
  },
  props: {
    detail: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      isAnimation: false,
      sum: 1,
      show: 1,
      isOpen: false,
      timeout: null,
      userList: null
    };
  },
  created() {
    this.setUserList();
    this.isAnimation = true;
    this.countdownA();
  },
  destroyed() {
    if (this.timeout) {
      clearTimeout(this.timeout);
    }
  },
  methods: {
    setUserList() {
      const list = [];
      for (let i = 0; i < 13; i++) {
        const avatar = Math.floor(Math.random() * 400);
        list.push({
          avatar: this.$tools.formatOss(`http://alicdn.itaored.com/feima-uploaded/headImg/${avatar}.png`, 80)
        });
      }
      this.userList = list;
    },
    handleClose() {
      if (this.timeout) {
        clearTimeout(this.timeout);
      }
      this.$emit('close');
    },
    countdownA() {
      if (this.timeout) {
        clearTimeout(this.timeout);
      }
      this.timeout = setTimeout(() => {
        this.sum--;
        if (this.sum >= 0) {
          this.countdownA();
        } else {
          this.isOpen = true;
          this.countdownB();
          this.$emit('ready');
        }
      }, 1000);
    },
    countdownB() {
      if (this.timeout) {
        clearTimeout(this.timeout);
      }
      this.timeout = setTimeout(() => {
        this.sum = 2;
        this.show = 2;
        this.countdownC();
      }, 1000);
    },
    countdownC() {
      if (this.timeout) {
        clearTimeout(this.timeout);
      }
      this.timeout = setTimeout(() => {
        this.sum--;
        if (this.sum >= 0) {
          this.countdownC();
        } else {
          this.$emit('submit');
        }
      }, 1000);
    },
    handleSubmit() {
      if (this.timeout) {
        clearTimeout(this.timeout);
      }
      this.$emit('submit');
    }
  }
};
</script>

<style lang="scss" scoped>
  .p-pop-x{
    background: #000; height: 100vh;
    .layer-1,
    .layer-2{
      height: 100vh; width: 100%; position: absolute; left: 0; top: 0; overflow: hidden; display: none; align-items: center; flex-direction: column; justify-content: center; text-align: center;
      &.is-show{ display: flex;}
    }

    .layer-1{
      .title{
        width: 612px; height: 150px; background: cdn('/images/pic-015.png') no-repeat; background-size: cover; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #FDF6CD; font-size: 50px; font-weight: bold; position: relative;
        .em{ font-weight: normal; font-size: 38px;}
      }
      .user{
        padding: 40px 0;
        .x-grid{ gap: 20px; justify-content: center; align-items: center;}
        .avatar{ border: 3px solid #DDC06B; width: 100px; height: 100px; border-radius: 50%; overflow: hidden;}
        .flex{
          display: flex; align-items: center; justify-content: center; padding-top: 10px;
          .li{ padding: 10px;}
        }
      }
      .hand{
        height: 400px; position: relative; width: 100%;
        .left{ width: 521px; height: 565px; background: cdn('/images/pic-020.png') no-repeat; background-size: cover; position: absolute; left: -140px; top: -50px;}
        .right{ width: 525px; height: 566px; background: cdn('/images/pic-021.png') no-repeat; background-size: cover; position: absolute; right: -140px; top: -50px;}
      }
    }

    .layer-2{
      .title{ width: 612px; height: 122px; background: cdn('/images/pic-014.png') no-repeat; background-size: cover; display: flex; align-items: center; justify-content: center; text-align: center; color: #FDF6CD; font-size: 50px; font-weight: bold; position: relative;}
      .user{
        padding: 40px 0; display: flex;
        .avatar{ border: 3px solid #DDC06B; width: 100px; height: 100px; border-radius: 50%; overflow: hidden;}
        .li{ padding: 10px;}
      }
      .box{ display: flex; align-items: center; justify-content: center; flex-direction: column; background: #fff; width: 550px; height: 600px; border-radius: 20px; position: relative;}
      .dl{ display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 30px 0 80px;}
      .amount{
        color: $uni-color-primary; position: relative; font-size: 160px; font-weight: bold; line-height: 1;
        .sub{ font-weight: normal; font-size: 40px; position: absolute; right: -40px; bottom: 26px;}
      }
      .dt{ color: #710A1A; font-size: 46px; padding-bottom: 40px; }
      .dd{ color: #86521B; padding-top: 10px;}
      .button{
        background: $uni-color-primary; width: 460px; height: 90px; line-height: 90px; border-radius: 10px; color: #fff; font-size: 40px; text-align: center; position: relative; overflow: hidden;;
        &:after{ content: ''; position: absolute; left: -100px; width: 90px; height: 90px; border-radius: 50%; background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgba(255, 255, 255, .3));}
      }

      &.is-show{
        .title{ opacity:0; animation: fadeInLeft .4s .2s ease-in forwards;}
        .box{ opacity: 1; animation: zoomInBox .6s ease-in forwards;}
        .amount{ opacity: 1; animation: zoomInBox .3s .4s ease-in forwards;}
        .user .my{ opacity: 0; animation: bounceInLeft .5s .3s ease-in forwards;}
        .user .you{ opacity: 0; animation: bounceInRight .5s .3s ease-in forwards;}
        .button{
          animation: blink-animation 2s .5s infinite;
          &:after{ animation: fadeLightIn 1s .8s ease-out infinite;}
        }
      }
    }

    .timeout{ position: absolute; left: 0; bottom: -70px; color: #BCBABC; font-size: 28px; text-align: center; width: 100%;}
    ._close{ position: absolute; right: 50px; top: 250px; }

    &.is-animation{
      .layer-1{
        .title{ opacity:0; animation: fadeInLeft .4s .2s ease-in forwards;}
        .hand{
          .left{ opacity: 0; animation: fadeIn .3s .5s ease-in forwards}
          .right{ opacity: 0; animation: fadeInUp .3s .2s ease-in forwards}
        }
        .user {
          opacity: 0; animation: fadeInUp .2s .2s ease-in forwards;
          .li{
            &:nth-child(even) .avatar{ animation: blink-animation 2s infinite;}
            &:nth-child(odd) .avatar{ animation: blink-animation 2s 1s infinite;}
          }
        }
      }
    }

    &.is-open{
      .layer-1{
        .hand{
          .left{ opacity: 1; animation: rotateZLeft 1.5s infinite linear; transform-origin: left center;}
          .right{ opacity: 1; animation: rotateZRigth 1.5s infinite linear; transform-origin: right center;}
        }
        .timeout{ opacity: 0;}
      }
    }
  }

  @keyframes fadeInLeft {
    0% {
      opacity:0;
      transform:translate3d(-100%, 0, 0)
    }
    to {
      opacity:1;
      transform:translateZ(0)
    }
  }

  @keyframes fadeInUp {
    0% {
      opacity:0;
      transform:translate3d(0, 100%, 0)
    }
    to {
      opacity:1;
      transform:translateZ(0)
    }
  }

  @keyframes fadeIn {
    0% {
      opacity:0;
    }
    to {
      opacity:1;
    }
  }

  @keyframes blink-animation {
    0% {
      transform:scale3d(.9, .9, .9)
    }
    50% {
      transform:scale3d(1, 1, 1)
    }
    100% {
      transform:scale3d(.9, .9, .9)
    }
  }

  @keyframes rotateZLeft {
    0%, to {
      transform: rotateZ(0)
    }
    10%, 30%, 50%, 70%, 90% {
      transform: rotateZ(-10deg)
    }
    20%, 40%, 60%, 80% {
      transform: rotateZ(10deg)
    }
  }

  @keyframes rotateZRigth {
    0%, to {
      transform: rotateZ(0)
    }
    10%, 30%, 50%, 70%, 90% {
      transform: rotateZ(10deg)
    }
    20%, 40%, 60%, 80% {
      transform: rotateZ(-10deg)
    }
  }

  @keyframes zoomInBox {
    0% {
      transform:scale3d(.1, .1, .1)
    }
    80% {
      transform:scale3d(1.2, 1.2, 1.2)
    }
    to {
      transform:scale3d(1, 1, 1)
    }
  }

  @keyframes bounceInLeft {
    0% {
      opacity: 0;
      transform:translate3d(-300px, 0, 0) scaleX(3)
    }
    60% {
      opacity: 1;
      transform:translate3d(25px, 0, 0) scaleX(1)
    }
    75% {
      transform:translate3d(-10px, 0, 0) scaleX(.98)
    }
    90% {
      transform:translate3d(5px, 0, 0) scaleX(.995)
    }
    to {
      opacity: 1;
      transform:translateZ(0)
    }
  }

  @keyframes bounceInRight {
    0% {
      opacity: 0;
      transform:translate3d(300px, 0, 0) scaleX(3)
    }
    60% {
      opacity: 1;
      transform:translate3d(-25px, 0, 0) scaleX(1)
    }
    75% {
      transform:translate3d(10px, 0, 0) scaleX(.98)
    }
    90% {
      transform:translate3d(-5px, 0, 0) scaleX(.995)
    }
    to {
      opacity: 1;
    }
  }

  @keyframes fadeLightIn {
    0% {
      transform:translate3d(-100px, 0, 0)
    }
    to {
      transform:translate3d(550px, 0, 0)
    }
  }
</style>
